<!-- Sidebar Header-->
<div id="sidebarDiv">
<div class="sidebar-header d-flex align-items-center">
    <div id="avatar" class="avatar"><img :src="user.pic" alt="..." class="img-fluid rounded-circle" @click="toPersonal" id="headImg"></div>
    <div class="title">
        <h1 class="h5">{{user.realName}}</h1>
        <p>{{user.deptName}}</p>
    </div>
</div>
<!-- Sidebar Navidation Menus--><span class="heading">Main</span>
<ul class="list-unstyled">
    <li class="active"><a href="toHome"> <i class="icon-home"></i>主页 </a></li>
    <li><a href="#userDropdown"  data-toggle="collapse"> <i class="icon-windows"></i>用户列表</a>
        <ul id="userDropdown" class="collapse list-unstyled ">
            <li><a href="main/user/toUser">查看用户</a></li>
            <li><a href="main/user/toMyUser">我关注的用户</a></li>
            <li><a href="main/article/toArticle">发布文章</a></li>
            <li><a href="main/article/toArticleColl">我的收藏</a></li>
        </ul>
    </li>
    <!--<li><a href="login.html"> <i class="icon-logout"></i>Login page </a></li>-->

    <li><a href="#depDropdown"  data-toggle="collapse"> <i class="icon-windows2"></i>部门列表</a>
        <ul id="depDropdown" class="collapse list-unstyled ">
            <li><a href="main/dept/toDept">全部部门</a></li>
            <li><a href="main/meeting/toMeeting">会议系统</a></li>
        </ul>
    </li>

</ul>
</div>
<script>
    let sidebarV = new Vue({
        el:'#sidebarDiv',
        data:{
            user:{

            },
        },
        methods:{
            initSidebar:function () {
                axios({
                    url:'main/sidenav/getLoginUser',
                }).then(resp => {
                    this.user = resp.data.obj;
                }).catch(error => {
                    layer.msg(error.message);
                })
            },

            toPersonal:function () {
                location.href = 'main/sidenav/toPersonal';
            }
        },
        created:function () {
            this.initSidebar();
        }

    })
</script>